<template>
  <div class="reward-wrap">
    <div class="my-router-box">
      <p @click="$router.push('/home')">{{ $t("首页") }}</p>
      <img src="../../assets/img/prev-tab@2x.png" alt="" />
      <p>{{ $t("悬赏求助") }}</p>
    </div>
    <div class="reward-form">
      <el-form :model="formData" ref="formData" label-width="0" class="demo-ruleForm" :rules="rules"
        @submit.native.prevent>
        <p class="reward-form-title">{{ $t("主题") }}</p>
        <el-form-item prop="title" :rules="[{ required: true, message: $t('主题不能为空') }]"><el-input
            :placeholder="$t('目前您遇到什么问题')" v-model="formData.title"></el-input></el-form-item>
        <p class="reward-form-title" style="margin-top: 1.78rem">
          {{ $t("详细描述") }}
        </p>
        <el-form-item prop="description" :rules="[{ required: true, message: $t('详细描述不能为空') }]"><el-input
            type="textarea" rows="4" v-model="formData.description" :placeholder="$t('请详细描述一下您目前遇到的问题情况(包括不限于...)')
              "></el-input></el-form-item>

        <p class="reward-form-title" style="margin-top: 1.78rem">
          {{ $t("病例报告") }}
        </p>
        <el-form-item prop="imageUrl" :rules="[{ required: true, message: $t('病例报告不能为空') }]">
          <el-upload :action="uploadUrl" list-type="picture-card" :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove" :file-list="formData.imageUrl" :on-success="uploadSuccess">
            <img src="../../assets/img/Vector@2x.png" alt="" />
          </el-upload>
        </el-form-item>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
        <p class="reward-form-title" style="margin-top: 1.78rem">
          {{ $t("调查问卷") }}
        </p>
        <el-form-item prop="surveyDone">
          <div class="survey-button-box">
            <div class="open-survey-btn active" @click="openSurvey">
              {{ formData.surveyDone ? $t("已填写") : $t("点击填写") }}
            </div>
          </div>
        </el-form-item>
        <p class="reward-form-title" style="margin-top: 1.78rem">
          {{ $t("基本信息") }}
        </p>
        <div class="info-wrap">
          <div class="info-item-wrap">
            <p class="info-title">{{ $t("性别") }}</p>
            <el-form-item prop="sex" :rules="[{ required: true, message: $t('性别不能为空') }]">
              <div class="check-box-wrap">
                <div class="my-check-box-item" :class="{ active: formData.sex == 1 }">
                  <div class="check-box" @click="setSex(1)">
                    <i class="el-icon-check"></i>
                  </div>
                  <p class="check-label">{{ $t("男") }}</p>
                </div>
                <div class="my-check-box-item" :class="{ active: formData.sex == 2 }">
                  <div class="check-box" @click="setSex(2)">
                    <i class="el-icon-check"></i>
                  </div>
                  <p class="check-label">{{ $t("女") }}</p>
                </div>
                <div class="my-check-box-item" :class="{ active: formData.sex === 0 }">
                  <div class="check-box" @click="setSex(0)">
                    <i class="el-icon-check"></i>
                  </div>
                  <p class="check-label">{{ $t("其他") }}</p>
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="info-item-wrap">
            <p class="info-title">{{ $t("身高") }}</p>
            <div>
              <el-form-item prop="height" :rules="[{ required: true, message: $t('身高不能为空') }]">
                <el-input :placeholder="$t('请输入身高')" v-model="formData.height"
                  onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"></el-input>
              </el-form-item>
              <p class="tips">cm</p>
            </div>
          </div>
          <div class="info-item-wrap">
            <p class="info-title">{{ $t("体重") }}</p>
            <div>
              <el-form-item prop="weight" :rules="[{ required: true, message: $t('体重不能为空') }]"><el-input
                  :placeholder="$t('请输入体重')" v-model="formData.weight"
                  onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"></el-input></el-form-item>
              <p class="tips">kg</p>
            </div>
          </div>
          <div class="info-item-wrap">
            <p class="info-title">{{ $t("出生日期") }}</p>
            <el-form-item prop="birthday" :rules="[{ required: true, message: $t('出生日期不能为空') }]">
              <el-date-picker v-model="formData.birthday" type="date" :placeholder="$t('选择日期')"
                value-format="timestamp">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="info-item-wrap">
            <p class="info-title">{{ $t("所在城市") }}</p>
            <el-form-item prop="detailAddress" :rules="[{ required: true, message: $t('所在城市不能为空') }]">
              <el-cascader ref='cascaderRef' v-model="formData.detailAddress" :options="treeData"
                :props="{ label: 'name', value: 'id', expandTrigger: 'hover',checkOnClickNode: 'true' }"></el-cascader>
              <!-- <tree-select v-model="formData.detailAddress" :data="treeData"
                :props="{ children: 'children', label: 'name' }" node-key="id"></tree-select> -->
            </el-form-item>
          </div>
          <div class="info-item-wrap">
            <p class="info-title">{{ $t("预期接单") }}</p>
            <el-form-item prop="expectedDate" :rules="[{ required: true, message: $t('预期接单不能为空') }]"><el-date-picker
                v-model="formData.expectedDate" type="date" :placeholder="$t('选择日期')" value-format="timestamp">
              </el-date-picker></el-form-item>
          </div>
          <div class="info-item-wrap" style="margin-bottom: 0.89rem">
            <p class="info-title">{{ $t("悬赏金额") }}</p>
            <el-form-item prop="reward" :rules="[{ required: true, message: $t('悬赏金额不能为空') }]">
              <el-input :placeholder="$t('请输入悬赏金额')" v-model="formData.reward"
                onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"></el-input>
            </el-form-item>
          </div>
          <div class="info-item-wrap" style="margin-bottom: 0.89rem">
            <p class="info-title">{{ $t("任务小费") }}</p>
            <el-form-item prop="tip"><el-input :placeholder="$t('请输入任务小费')" v-model="formData.tip"
                onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"></el-input></el-form-item>
          </div>
        </div>
        <div class="my-check-box-item" :class="{ active: formData.urgent }" style="padding-left: 0.44rem">
          <div class="check-box" @click="formData.urgent = !formData.urgent">
            <i class="el-icon-check"></i>
          </div>
          <p>
            {{ $t("加急")
            }}<span style="color: #f85c02">{{ $t("《额外支付¥")
            }}{{ configData.chargeTaskUrgent / 100 }}》</span>
          </p>
        </div>
        <button class="my-button" style="margin-top: 3.61rem" v-loading="isLoading" @click="submitMission">
          {{ $t("支付¥") }}{{ allPrice }}{{ $t("定金并发布(合计悬赏金¥")
          }}{{ finallyPrice }})
        </button>
        <el-form-item prop="tongyi" ref="tyItem">
          <div class="my-check-box-item" :class="{ active: formData.tongyi }" style="margin-top: 0.89rem">
            <div class="check-box" @click="changeTY">
              <i class="el-icon-check"></i>
            </div>

            <p>
              {{ $t("支付即表示,您同意")
              }}<span style="color: #339eff" @click="openProtocol('/Rebirthealth 平台悬赏方服务条款（修改版）.html')">{{
                $t("《平台悬赏方服务条款》") }}</span>
            </p>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="remark-box">
      <div class="remark-title">
        <img src="../../assets/img/title.png" alt="" />
        <p>{{ $t("注意事项") }}</p>
      </div>
      <p class="remark-content">
        <img src="../../assets/img/zhuyi.png" alt="">
      </p>
    </div>
    <el-dialog :title="$t('调查问卷')" :visible.sync="showSurveyDialog" width="90%" :before-close="handleClose"
      class="my-dialog__wrapper survey-dialog-wrap" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="survey-wrap">
        <el-form :model="dialogData" ref="dialogData" label-width="0" class="survey-ruleForm" @submit.native.prevent>
          <el-form-item v-for="(item, index) in dialogData.surveyList" :key="item.id"
            :prop="'surveyList.' + index + '.pitch'">
            <div class="items-center">
              <p class="survey-title">
                <span class="">{{ index + 1 + "." }}{{ item.title }}</span>
                <!-- <span>{{ $t("答：") }}</span> -->
              </p>
              <el-input v-if="item.type == 0" v-model="item.pitch" />
              <el-select v-model="item.pitch" v-if="item.type == 1">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in item.value" :key="index" />
              </el-select>
              <el-radio-group v-if="item.type == 2" v-model="item.pitch">
                <el-radio size="large" v-for="(item, index) in item.value" :key="index" :label="item.value">{{
                  item.label }}</el-radio>
              </el-radio-group>
              <el-checkbox-group v-if="item.type == 3" v-model="item.pitch">
                <el-checkbox v-for="(item, index) in item.value" :key="index" :label="item.value">{{ item.label
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setSurvey">{{
          $t("确 定")
        }}</el-button>
      </span>
    </el-dialog>
    <serveDialog ref="serveDialog"></serveDialog>
    <payDialog ref="payDialog" @payDone="payDone" :payId="payId"></payDialog>
  </div>
</template>
<script>
import api from "@/api/reward.js";
import api2 from "@/api/utils.js";
export default {
  data() {
    var checkTY = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(this.$t("请阅读协议并勾选同意")));
      } else {
        callback();
      }
    };
    var checkSV = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(this.$t("请填写调查问卷")));
      } else {
        callback();
      }
    };
    return {
      isLoading: false,
      rules: {
        tongyi: [{ validator: checkTY, trigger: ["blur", "change"] }],
        // surveyDone: [{ validator: checkSV, trigger: ["blur", "change"] }],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      dialogData: {
        surveyList: [],
      },
      showSurveyDialog: false,
      uploadUrl: this.$store.state.baseURL + api2.upload,
      payId: null,
      formData: {
        title: "",
        description: "",
        imageUrl: [],
        sex: "",
        height: "",
        weight: "",
        birthday: "",
        detailAddress: "",
        expectedDate: "",
        reward: null,
        tip: null,
        urgent: false,
        tongyi: false,
        surveyDone: false,
      },
      // formData: {
      //   title: "测试123",
      //   description: "是是是222",
      //   imageUrl: [
      //     "https://api.rebirthealth.com/admin-api/infra/file/4/get/504b61b61d07e5798f63204cf2ec990af0441fef1caa7123f7e6627bb2f3a438.png",
      //   ],
      //   sex: "",
      //   height: "",
      //   weight: "",
      //   birthday: "",
      //   detailAddress: "",
      //   expectedDate: "2025-7-17",
      //   reward: "100000",
      //   tip: "10000",
      //   urgent: false,
      //   tongyi: true,
      //   surveyDone: true,
      // },
    };
  },
  computed: {
    treeData() {
      var areaData = this.$store.state.areaTree;
      //递归去掉空的children
      return this.removeEmptyChildren(areaData);
    },
    configData() {
      let configData = this.$store.state.configData;
      return configData || {};
    },
    allPrice() {
      let price =
        (Number(this.formData.reward) *
          this.configData.paymentRatioTaskPublish) /
        100;
      if (this.formData.tip) {
        price += Number(this.formData.tip);
      }
      if (this.formData.urgent) {
        price += Number(this.configData.chargeTaskUrgent / 100);
      }
      return price;
    },
    finallyPrice() {
      let price = Number(this.formData.reward);
      if (this.formData.tip) {
        price += Number(this.formData.tip);
      }
      if (this.formData.urgent) {
        price += Number(this.configData.chargeTaskUrgent / 100);
      }
      return price;
    },
    userInfo() {
      let userInfo = this.$store.state.userInfo;
      if (userInfo) {
        return JSON.parse(userInfo);
      } else {
        return {};
      }
    },
  },
  mounted() {
    let query = this.$route.query;
    if (query.title) {
      this.formData.title = query.title;
    }
    this.getConfig();
    // this.initData();
  },
  methods: {
    /**
     * 递归移除空的children数组
     * @param {Array|Object} data - 需要处理的数据
     * @returns {Array|Object} 处理后的数据
     */
    removeEmptyChildren(data) {
      // 如果是数组，遍历每一项
      if (Array.isArray(data)) {
        return data.map(item => this.removeEmptyChildren(item))
                  .filter(item => item !== null); // 过滤掉null值
      } 
      // 如果是对象，检查并处理children属性
      else if (data !== null && typeof data === 'object') {
        // 创建新对象存储处理后的属性
        const result = {};
        
        // 遍历所有属性
        for (const key in data) {
          if (data.hasOwnProperty(key)) {
            // 特殊处理children属性
            if (key === 'children') {
              // 如果children是数组
              if (Array.isArray(data[key])) {
                // 如果是空数组，则跳过（不添加到结果中）
                if (data[key].length > 0) {
                  // 如果不是空数组，则递归处理
                  result[key] = this.removeEmptyChildren(data[key]);
                }
                // 如果是空数组，则不添加这个属性
              } else {
                // 如果children不是数组，保留原值
                result[key] = data[key];
              }
            } else {
              // 其他属性直接复制
              result[key] = data[key];
            }
          }
        }
        return result;
      }
      // 其他类型直接返回
      return data;
    },
    initData() {
      this.formData.sex = this.userInfo.sex;
      this.formData.height = this.userInfo.height;
      this.formData.weight = this.userInfo.weight;
      this.formData.birthday = this.userInfo.birthday;
      this.formData.detailAddress = this.userInfo.areaId;
    },
    setSurvey() {
      this.$refs["dialogData"].validate(async (valid) => {
        if (valid) {
          this.showSurveyDialog = false;
          this.formData.surveyDone = true;
        }
      });
    },
    changeTY() {
      this.formData.tongyi = !this.formData.tongyi;
      let _this = this.$refs["tyItem"];
      _this.onFieldChange();
    },
    uploadSuccess(res, file, fileList) {
      this.formData.imageUrl.push({ uid: file.uid, url: res.data });
      // 手动触发病例报告字段的验证
      this.$refs.formData.validateField('imageUrl');
    },
    async payDone() {
      let res = await this.$http.get(api.getOrderPayType, {
        params: { id: this.payId, sync: true },
      });
      this.$store.commit("SET_PERSONTAB", 2);
      this.$router.push("/personcenter");
    },
    async submitMission() {
      let addr2 = this.$refs.cascaderRef.getCheckedNodes()
      console.log(addr2)
      this.$refs["formData"].validate(async (valid) => {
        if (valid) {
          let surveyList = [];
          for (
            let index = 0;
            index < this.dialogData.surveyList.length;
            index++
          ) {
            const { pitch, title, type, value } =
              this.dialogData.surveyList[index];
            const submitSurvey = { pitch, title, type, value };
            if (submitSurvey.type == 3) {
              submitSurvey.pitch = submitSurvey.pitch.join();
            }
            //只保存用户填写的项目，否则不进行落库
            if (typeof submitSurvey.pitch !== 'undefined'
              && submitSurvey.pitch != null
              && submitSurvey.pitch !== '') {
              surveyList.push(submitSurvey);
            }
          }
          let params = JSON.parse(JSON.stringify(this.formData));
          delete params.tongyi;
          params.survey = surveyList;
          params.imageUrl = params.imageUrl.map((c) => c.url);
          params.status = "0";
          params.reward = params.reward * 100;
          params.tip = params.tip * 100;
          if (params.urgent) {
            params.fee = this.configData.chargeTaskUrgent;
          } else {
            params.fee = 0;
          }
          params.detailAddress = this.$refs.cascaderRef.getCheckedNodes()[0].pathLabels.join(' ')
          params.areaId = this.$refs.cascaderRef.getCheckedNodes()[0].value
          this.isLoading = true;
          let res = await this.$http.post(api.createMission, params);
          this.isLoading = false;
          if (res && res.code == 0) {
            this.payId = res.data;
            this.$refs["payDialog"].openDialog();
          } else {
            this.$message.error(res.msg || this.$t("网络错误"));
          }
        } else {
          // 验证失败，查找第一个错误字段并聚焦
          this.focusFirstErrorField();
        }
      });
    },
    // 查找第一个错误字段并聚焦
    focusFirstErrorField() {
      // 获取所有验证失败的字段
      const invalidFields = this.$refs["formData"].fields.filter(field => field.validateState === 'error');

      if (invalidFields.length > 0) {
        // 获取第一个错误字段的DOM元素
        const firstInvalidField = invalidFields[0];
        const el = firstInvalidField.$el;

        if (el) {
          // 滚动到该字段位置
          el.scrollIntoView({ behavior: 'smooth', block: 'center' });

          // 聚焦到输入框
          const input = el.querySelector('input, textarea, select');
          if (input) {
            input.focus();
          }
        }
      }
    },
    setSex(value) {
      this.formData.sex = value;
      // 手动触发性别字段的验证
      this.$refs.formData.validateField('sex');
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    openSurvey() {
      this.showSurveyDialog = true;
    },
    async getConfig() {
      let res = await this.$http.get(api.getConfig);
      if (res && res.code == 0) {
        let surveyList = [];
        for (let index = 0; index < res.data.length; index++) {
          const { pitch, title, type, value } = res.data[index];
          const submitSurvey = { pitch, title, type, value };
          if (submitSurvey.type != 0) {
            submitSurvey.value = JSON.parse(submitSurvey.value);
            if (submitSurvey.type == 3) {
              submitSurvey.pitch = [];
            }
          }
          surveyList.push(submitSurvey);
        }
        this.dialogData.surveyList = surveyList;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    handleRemove(file, fileList) {
      let index = this.formData.imageUrl.findIndex((c) => c.uid == file.uid);
      if (index > -1) {
        this.formData.imageUrl.splice(index, 1);
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    openProtocol(url) {
      window.open(url, '_blank');
    }
  },
};
</script>
<style lang="scss" scoped>
.el-cascader {
  ::v-deep .el-input__inner{
    width: 16.8rem !important;
  }
}
.reward-wrap {
  margin-left: 7.78rem;
  margin-top: 3.72rem;
  margin-bottom: 5.56rem;
  display: flex;
  align-items: flex-start;

  .reward-form {
    background: #f5f7fa;
    width: 42.47rem;
    border-radius: 0.44rem;
    padding: 1.33rem;
    margin-right: 0.89rem;

    .reward-form-title {
      font-weight: bold;
      font-size: 1.33rem;
      color: #333333;
      margin-bottom: 0.89rem;
    }

    .info-wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.44rem;
      justify-content: space-between;

      .info-item-wrap {
        width: 16.67rem;
        margin-bottom: 1.78rem;

        .info-title {
          font-size: 0.89rem;
          color: #666666;
          line-height: 1.56rem;
          margin-bottom: 0.44rem;
        }

        .tips {
          position: absolute;
          right: 1rem;
          top: 1rem;
          font-size: 0.89rem;
          color: #425f9b;
        }
      }

      .check-box-wrap {
        display: flex;
        align-items: center;
      }
    }

    .survey-button-box {
      display: flex;

      .open-survey-btn {
        padding: 0.78rem 1.67rem;
        border-radius: 4.56rem 4.56rem 4.56rem 4.56rem;
        border: 0.06rem solid #339eff;
        font-weight: bold;
        font-size: 0.89rem;
        color: #339eff;
        text-decoration-line: underline;
        margin-right: 0.89rem;

        &.active {
          background: #339eff;
          color: #f5f7fa;
        }

        &:nth-child(1) {
          cursor: pointer;
        }
      }
    }
  }

  .remark-box {
    background: #f5f7fa;
    border-radius: 0.44rem;
    width: 21rem;
    padding: 0.89rem 1.17rem 0.89rem 0.89rem;

    .remark-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.06rem;

      p {
        font-weight: bold;
        font-size: 1.33rem;
        color: #333333;
      }

      img {
        width: 1.6rem;
        height: 1.12rem;
        margin-right: 0.44rem;
      }
    }

    .remark-content {
      font-weight: 400;
      font-size: 0.89rem;
      color: #666666;
      line-height: 1.56rem;
      letter-spacing: 0.01rem;

      img {
        width: 100%;
      }
    }
  }
}
</style>
<style lang="scss">
.reward-wrap {
  .el-input {
    .el-input__inner {
      width: 100%;
      border-color: #425f9b;
      height: 3.56rem;
      font-size: 0.89rem;
      background: transparent;
    }
  }

  .el-textarea {
    .el-textarea__inner {
      width: 100%;
      border-color: #425f9b;
      font-size: 0.89rem;
      background: transparent;
    }
  }

  .el-upload-list--picture-card {
    .el-upload-list__item {
      width: 6.39rem;
      height: 7.44rem;
    }
  }

  .el-upload--picture-card {
    width: 6.39rem;
    height: 7.44rem;
    background: #ebf6ff;
    border-radius: 0.11rem 0.11rem 0.11rem 0.11rem;
    border: 1px solid rgba(66, 95, 155, 0.15);
    line-height: 7.44rem;

    img {
      width: 1.41rem;
      height: 1.41rem;
    }
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner,
  .el-select {
    width: 100%;
  }
}

.survey-dialog-wrap {
  .el-dialog {
    margin-top: 5vh !important;
  }

  .survey-title {
    font-size: 1rem;
    /* 原0.6rem → 提升至1rem（约16px） */
    font-weight: 400;
    /* 加粗突出问题 */
    color: #2D2D2D;
    /* 深灰色更易读 */
    margin-bottom: 0.9rem;
    /* 增加问题与选项的间距 */
    line-height: 1.4;
    /* 优化长问题的换行 */
  }

  .el-radio-group {
    line-height: 1.2rem;

    .el-radio__label {
      font-size: 0.9rem;
      line-height: 0.6rem;
    }

    .el-radio__input {
      vertical-align: top;
    }

    .el-radio__inner {
      width: 0.6rem;
      height: 0.6rem;
    }

    .el-radio__inner:after {
      height: 0.2rem;
      width: 0.2rem;
    }
  }

  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;

    .el-checkbox {
      display: flex;
      align-items: center;
    }

    .el-checkbox__label {
      font-size: 0.9rem;
      line-height: 1.6rem;
    }

    .el-checkbox__input {
      vertical-align: top;
    }

    .el-checkbox__inner {
      width: 0.6rem;
      height: 0.6rem;
    }

    .el-checkbox__inner:after {
      height: 0.3rem;
      width: 0.1rem;
      left: 0.22rem;
    }
  }

  .survey-ruleForm {
    display: flex;
    flex-wrap: wrap;
  }

  .el-form-item {
    width: 23rem;
    padding: 1rem;
    // margin-bottom: 2rem;
    border-radius: 4px;
    /* 圆角软化边框 */
    background-color: #fafafa;
    border: 1px solid #e5e5e5;

    /* 边框颜色略深于背景 */
    .el-input .el-input__inner {
      height: 1.56rem;
      width: 80%;
    }

    .el-checkbox,
    .el-radio {
      max-width: 100%;
    }

    .el-checkbox__label,
    .el-radio__label {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 悬停状态：显示完整文本 */
    .el-checkbox__label:hover,
    .el-radio__label:hover {
      overflow: visible;
      /* 显示溢出内容 */
      text-overflow: clip;
      /* 清除省略号 */
      background: white;
      /* 背景色，避免文字透明 */
      z-index: 5;
      /* 确保在最上层 */
      max-width: none;
      /* 移除宽度限制 */
      padding-right: 10px;
      /* 右侧留白（可选） */
    }
  }

}
</style>
